<template>
  <div>
 <el-table
    :data="list.filter(item => !val || item.name.toLowerCase().includes(val.toLowerCase()))"
    style="width: 80%">
    <el-table-column
      label="成员账号"
      prop="id">
    </el-table-column>
    <el-table-column
      label="客服昵称"
      prop="name">
    </el-table-column>
     <el-table-column
      label="添加时间"
      prop="time">
    </el-table-column>
     <el-table-column
      label="最后登录"
      prop="time1">
    </el-table-column>
     <el-table-column
      label="是否启用"
      prop=''>
      <el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header">
        <el-input
          v-model="val"
          size="mini"
          type='text'
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 弹框 -->
  <div v-if="flag ?true:false">
  <el-dialog title="添加地址" :visible.sync="dialogFormVisible">
  <el-form :model="from">
    <el-form-item label="客服昵称" :label-width="formLabelWidth">
      <el-input v-model="from.name" autocomplete="off"></el-input>
    </el-form-item>
   
     

  </el-form>
  <div slot="footer" class="dialog-footer">
     <el-button type="primary" @click="add()">添加</el-button>
    <el-button @click="qu()">取 消</el-button>
    <el-button type="primary" @click="adder()">确定添加</el-button>
  </div>
</el-dialog>
  </div>
  <div v-if="flag ?false:true">
  <el-dialog title="修改地址" :visible.sync="dialogFormVisible">
  <el-form :model="item">
    <el-form-item label="客服昵称" :label-width="formLabelWidth">
      <el-input v-model="item.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="成员账号" :label-width="formLabelWidth">
     <el-input v-model="item.id" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
     <el-button type="primary" @click="add()">添加</el-button>
    <el-button @click="qu()">取 消</el-button>
    <el-button type="primary" @click="que(item.name,item.id)">确 定</el-button>
  </div>
</el-dialog>
  </div>


  </div>
</template>

<script>
// import <组件名称> from '<组件路径>'
import {mapState,mapActions} from 'vuex'
  export default {
    name: 'Service',
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        tableData: [],
        val: '',
        value:'',
        dialogFormVisible: false,
        formLabelWidth: '120px',
        flag:true,
        from:{
          name:'',
          id:+new Date(),
          time:new Date().toLocaleString(),
          time1:new Date().toLocaleString(),
        }
      }
    },
    //监听属性 类似于data概念
    computed: {
       ...mapState(['list','item'])
    },
    //监控data中的数据变化
    watch: {
     
    },
    //方法集合
    methods: {
      ...mapActions(['GET_LIST']),
      // 编辑详情
      handleEdit(index,row){
        // console.log(row)
        this.$store.commit('SET_DETAIL',row)
        this.dialogFormVisible=true
        this.flag=false
      },
      // 确认按钮
      que(){
        // console.log(name,id)
      this.dialogFormVisible=false
     
      },
      // 取消按钮
      qu(){
      this.dialogFormVisible=false
      },
      // 删除按钮
      handleDelete(index,row){
      this.$store.commit('SET_FILTER',row)
      },
      // 添加按钮
      add(){
        this.flag=true
        
      },
      adder(){
       this.$store.commit('SET_ADD',this.from)
      //  this.from.name=""
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.GET_LIST()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
</style>